<template>
    <div>
        <el-container class="content-row">
            <div class="input-tip">
                商品名称:
            </div>
            <div class="input-field">
                <el-input v-model="queryParams.gname"></el-input>
            </div>
        </el-container>
        <el-container class="content-row">
            <div class="input-tip">
                商品原价:
            </div>
            <div class="input-field">
                <el-input v-model="queryParams.goprice"></el-input>
            </div>
        </el-container>
        <el-container class="content-row">
            <div class="input-tip">
                商品折扣价:
            </div>
            <div class="input-field">
                <el-input v-model="queryParams.grprice"></el-input>
            </div>
        </el-container>
        <el-container class="content-row">
            <div class="input-tip">
                库存数量:
            </div>
            <div class="input-field">
                <el-input v-model="queryParams.gstore"></el-input>
            </div>
        </el-container>
        <el-container class="content-row">
            <div class="input-tip">
                商品封面:
            </div>
                <el-upload
                name="fileName" 
                :auto-upload="false"
                :limit="1" 
                :on-change="handleChange"
                :file-list="fileList"
                list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
        </el-container> 
        
        <el-container class="content-row">
            <div class="input-tip">
                是否推荐:
            </div>
            <div class="input-field">
                <el-radio-group v-model="queryParams.isRecommend">
                    <el-radio v-model="queryParams.isRecommend" label="1">是</el-radio>
                    <el-radio v-model="queryParams.isRecommend" label="0">否</el-radio>
                </el-radio-group>
            </div>
        </el-container>
        
        <el-container class="content-row">
            <div class="input-tip">
                是否广告:
            </div>
            <div class="input-field">
                <el-radio-group v-model="queryParams.isAdvertisement">
                    <el-radio v-model="queryParams.isAdvertisement" label="1">是</el-radio>
                    <el-radio v-model="queryParams.isAdvertisement" label="0">否</el-radio>
                </el-radio-group>
            </div>
        </el-container>

        <el-container class="content-row">
            <div class="input-tip">
                商品分类:
            </div>
            <div class="input-field">
                <el-select v-model="queryParams.goodstype_id">
                    <el-option v-for="item in categoryList" 
                        :key="item.id" :label="item.typename" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-top:6px">
                <el-button type="primary" size="mini" round @click="addCategory">添加分类</el-button>
            </div>
        </el-container>
        <el-container class="content-row">
            <el-button type="success" plain @click="submit">提交</el-button>
            <div style="margin-left:40px"></div>
            <el-button type="warning" plain @click="cancel">取消</el-button>
        </el-container>
    </div>

</template>


<script>
import axios from 'axios'
import {ElMessage} from 'element-plus'

export default{
    data(){
        return {
            queryParams:{
                gname:"",
                goprice:0,
                grprice:0,
                gstore:0,
                gpicture:"",
                isAdvertisement:0,
                isRecommend:0,
                goodstype_id:0
            },
            categoryList:[
                {
                    id:1231,
                    typename:"男装",
                },
            ],
            fileList:[
                {
                    name:"",
                    url:''   
                },
            ]
        
        }
    },
    mounted(){
        let baseURL='http://localhost:8888';

        axios.get(baseURL+"/type/showAllTypes")
        .then(successResponse=>{
            this.categoryList=successResponse.data;
    
        }).catch(failResponse=>{
            alert("响应异常");
        })


      
        let gid=this.$route.params.gid;
        if(gid!=null){
            // ElMessage({
            //     type:'success',
            //     message:'mounted updatedGoodId: '+gid
            // });
            let targetURL='http://localhost:8888/goods/selectAGood?id='+gid;
           
                axios.post(targetURL)
                .then(successResponse => {
                    let goods=successResponse.data;
                    ElMessage({
                        type:'success',
                        message:goods
                    });
                    let baseURL='http://localhost:8888';
                    if(goods!=null){
                        this.queryParams=null;
                        this.queryParams=goods;
                        let goodImgPath=baseURL+"/images/"+this.queryParams.gpicture;
                        this.queryParams.fileName=goodImgPath;
                        this.fileList[0].name=goods.gpicture;
                        this.fileList[0].url=goodImgPath;
                    }
                    
                })
                .catch(failResponse => {
                    ElMessage({
                        message:'响应异常',
                        type:'error',
                        duration:3000
                    });
                })
        }else{
            this.fileList=[];
        }
    },
 
    methods:{
        //通过onchanne触发方法获得文件列表
        handleChange(file, fileList) { 
            this.queryParams.gpicture=fileList[0].raw.name;
            this.queryParams.fileName=fileList[0].raw;
        },
        
        cancel(){
            this.$router.go(-1)
        },
        submit(){
            ElMessage({
                type:'success',
                message:'设置商品基本属性: '+JSON.stringify(this.queryParams)
            })

            if(this.queryParams.gname=="" || this.queryParams.gpicture==""){
                alert("商品名称或图片为空，请重新输入！")
            }
            else{

                let formData=new FormData();
               
                for(var key in this.queryParams){
                    formData.append(key.toString(), this.queryParams[key]);
                }

                let config={
                    headers:{'Content-Type':'multipart/form-data'}
                };

                let infoSucc='添加商品成功！';
                let infoFail='添加商品失败';
                let baseURL='http://localhost:8888/goods/addGoods';

                let gid=this.$route.params.gid;
                if(gid!=null){
                    infoSucc='修改商品成功！';
                    infoFail='修改商品失败！';
                    baseURL='http://localhost:8888/goods/updateGoods';
                }

                axios.post(baseURL, formData, config)
                .then(successResponse => {
                    if (successResponse.data === "no") {
                        ElMessage({
                            message: infoFail,
                            type:'error',
                            duration:3000
                        });
                    }else{
                        ElMessage({
                            message: infoSucc,
                            type:'success',
                            duration:3000
                        });
                    }
                })
                .catch(failResponse => {
                    ElMessage({
                        message:'响应异常',
                        type:'error',
                        duration:3000
                    });
                })
            }


        },
        addCategory(){
            this.$router.push({name:'GoodCategory'})
        }
    }
}
</script>